<template>
  <div class="form-header">
    <a-form-model v-bind="configForm.form">
      <a-form-model-item
        v-for="item in configItems"
        :label="item.label"
        :labelCol="item.labelCol"
        :wrapperCol="item.wrapperCol"
        :key="item.key"
      >
        <!--todo: 使用自定义组件，支持自定义组件渲染 -->
        <component
          :is="item.tag"
          v-model="formModel[item.key]"
          v-bind="item.props"
          v-on="item.on"
        >
        </component>
      </a-form-model-item>
      <div class="form-header__btn" :style="formHeaderBtnStyle">
        <template  v-for="btn in configForm.buttons">
          <!-- 下拉菜单按钮 -->
          <!-- todo: 合并到 formButton，在里面做逻辑判断 -->
          <a-dropdown
            v-if="isDropdownBtn(btn)"
            :key="btn.key"
            :style="btn.style"
            v-bind="btn.props"
          >
            <a-menu slot="overlay" v-on="btn.on">
              <a-menu-item v-for="item in btn.dropdownItems" :key="item.key">
                {{ item.label || item.key }}
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> {{ btn.label }} <a-icon type="down" /> </a-button>
          </a-dropdown>
          <!-- 普通按钮 -->
          <form-button
            v-else
            :key="btn.key"
            :style="btn.style"
            v-on="btn.on"
            v-bind="btn.props"
          >
            {{ btn.label }}
          </form-button>
        </template>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import FormTagMap from '@comp/ConfigForm/config'
import FormSelect from '@comp/ConfigForm/components/form-select.vue'
import FormButton from '@comp/ConfigForm/components/form-button.vue'
export default {
  name: 'form-header',
  inheritAttrs: false,
  components: {
    FormButton,
    FormSelect
  },
  props: {
    formConfig: {
      type: Object,
      default: () => {}
    },
    formItems: {
      type: Array,
      default: () => []
    },
    formModel: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    const DEFAULT_CONFIG = {
      form: {
        layout: 'inline',
        labelAlign: 'left',
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      buttons: []
    }
    return {
      DEFAULT_CONFIG
    }
  },
  computed: {
    configItems () {
      return this.formItems.map(this.formatItem)
    },
    configForm () {
      return Object.assign({}, this.DEFAULT_CONFIG, this.formConfig)
    },
    formHeaderBtnStyle () {
      let span = 4 - ((this.configItems.length + 4) % 4)
      return {
        'grid-column-start': `span ${span}`
      }
    }
  },
  methods: {
    isFunction (fn) {
      return typeof fn === 'function'
    },
    formatItem (config) {
      let item = { ...config }
      const type = item.type || 'input'
      const component = FormTagMap[type]
      item.tag = component.tag

      const _props = this.isFunction(item.props) ? item.props(this.formModel) : item.props
      item.props = { ...component.props, ..._props }
      return item
    },
    isDropdownBtn ({ tag }) {
      return tag === 'a-dropdown'
    }
  }
}
</script>

<style scoped lang='less'>
.form-header {
  .ant-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    .form-header__btn {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      flex-grow: 1;
    }
  }
}

</style>
